<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./static/css/css.css">
    <script src="/static/vue.min.js"></script>
    <script src="/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" href="/static/css/css.css">
    <link rel="stylesheet" type="text/css" href="/static/lib-master/theme-chalk/index.css"/>
    <script src="/static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div id="msg">
    <el-row :gutter="20">
        <el-col :span="8" align="middle">
            -
        </el-col>
        <el-col :span="10" align="middle">
            <div class="grid-content bg-purple">
                <el-row :gutter="20">
                    <el-form ref="form" :model="datalists" label-width="80px">
                        <el-form-item label="">
                            <strong>{{datalists.informa}}</strong>

                        </el-form-item>
                        <el-col :span="10" align="middle">
                            <el-form-item label="">
                                <img width="170px" :src="datalists.goodsImg">
                            </el-form-item>
                            <b>{{datalists.goodsName}}</b>
                        </el-col>
                        <el-col :span="12" align="middle">
                            <el-form-item label="开始时间">
                                <span>{{datalists.startTime}}</span>
                            </el-form-item>
                            <el-form-item label="结束时间">
                                <span>{{datalists.jendTime}}</span>
                            </el-form-item>
                            <el-form-item label="发起人">
                                <span>{{datalists.userName}}</span>
                            </el-form-item>
                            <el-form-item label="参与人" v-if="userNames != 0">
                                <span>{{userNames}}</span>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
                <el-button type="warning" center v-if="kanstatus==1" disabled>
                    参与砍价
                </el-button>
                <el-button type="warning" @click="tpart()" center v-if="kanstatus==0">
                    参与砍价
                </el-button>
                <el-button type="info" center @click="toadmin()">
                    <span>邀请好友,还差{{datalists.kanyu}}元</span>
                </el-button>
            </div>
        </el-col>
        <el-col :span="8" align="middle">

        </el-col>
    </el-row>
    <el-dialog title="登陆/注册" :visible.sync="divg">
        <el-form>
            <el-form-item label="用户名" prop="username">
                <el-input style="width: 500px;" v-model="user.username" autocomplete="off" @blur="toblur()"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input style="width: 500px;" type="password" v-model="user.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-button v-if="demo1==true" disabled type="primary" @click="submitForm('ruleForm')">登陆</el-button>
            <el-button v-if="demo1==true" disabled @click="regist()">注册</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">登陆</el-button>
            <el-button @click="regist()">注册</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<style>
    .el-row {
        margin-bottom: 20px;

    &
    :last-child {
        margin-bottom: 0;
    }

    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 460px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
<script>
    new Vue({
        el: "#msg",
        data() {
            return {
                barid: "",
                datalists: [],
                kanstatus: 0,
                userNames: 0,
                visible: false,
                usersId: "",
                usersIds: "",
                divg: false,
                formLabelWidth: '120px',
                dialogTableVisible: false,
                dialogFormVisible: false,
                user: {},
                users: {},
                demo1: false,
                demo2: false,
                barhuodong :[],
                infoas : [],
            }
        },
        created() {
            this.barid  = [[${barinId}]]
            this.usersIds = [[${userId}]]
            this.infoas = [[${info}]]
            this.datass()
            this.tobarain();
            this.tousers();
        },
        methods: {
            datass(){

              console.log(this.infoas)
                this.kanstatus = this.infoas

            },
            toblur() {

            },
            tousers() {
                if (this.usersId != null) {
                    axios.get("http://localhost:88/api/admin/users/info?id=" + this.usersId).then(({data}) => {

                    })
                }
            },
            regist() {
                axios.get("http://localhost:88/api/admin/users/toblur?username=" + this.user.username).then(({data}) => {
                    if (this.user.username == data.username) {
                        this.$message({
                            message: '该用户已存在',
                            type: 'success'
                        });
                        this.demo1 = true;
                        this.demo2 = true;
                    } else {
                        axios.post("http://localhost:88/api/admin/users/save", this.user).then(({data}) => {
                            if (data.code == 0) {
                                this.$message({
                                    message: '注册成功,',
                                    type: 'success'
                                });
                                this.divg = false;
                                this.divg = true;
                            }
                        })
                        this.demo1 = false;
                        this.demo2 = false;
                    }
                })
            },
            submitForm() {
                axios.post("http://localhost:88/api/admin/users/tologin", this.user).then(({data}) => {
                    if (data.code == 0) {
                        this.$message({
                            message: '欢迎回来,' + data.data.username,
                            type: 'success'
                        });
                        this.usersIds = data.data.id;
                        this.userNames = data.data.username;
                        this.divg = false;
                        this.tobarain();
                    } else {
                        alert("登陆失败")
                    }
                })
            },
            tpart() {
                if (this.userNames == 0) {
                    alert("无权访问,请登陆")
                    this.divg = true;
                } else {
                    axios.get("http://localhost:88/api/bargain/barginhuodong/infoss?userId=" + this.usersIds + "&barinId=" + this.barid + "").then(({data}) => {
                        console.log(data)
                        if (data.data == 0 ) {
                            axios.get("http://localhost:88/api/bargain/barginhuodong/tobargain?mid=" + this.barid + "&userId=" + this.usersIds + "").then(({data}) => {
                                    alert("砍价成功")
                            })
                        } else {
                            alert("此用户已经帮忙砍过")
                        }
                    })
                }
            },

            toadmin() {
                if (this.usersIds != 0) {
                    alert("http://localhost:88/api/community/tolist/tobarinIds?barinid=" + this.barid + "")
                } else {
                    this.tpart();
                }
            },
            tobarain() {
                axios.get("http://localhost:88/api/bargain/barginhuodong/infos?barinId=" + this.barid + "").then(({data}) => {
                    this.usersId = data.userid
                    if (this.usersId == this.usersIds) {
                        this.kanstatus = data.moveStatus
                    } else {
                        this.kanstatus = 0;
                    }
                    if (data != null) {
                        this.datalists = data;
                    }
                })
            }
        }

    })
</script>

</html>